import { memo } from 'react'
import classnames from 'classnames'

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'

import Icon from '@/components/icon'
// import Image from '@/components/Image'

import styles from './index.module.scss'

dayjs.locale('zh-cn')
dayjs.extend(relativeTime)

const ArticleItem = memo(({ aut_name, title, pubdate, cover, comm_count }) => {
  return (
    <div className={styles.root}>
      <div
        className={classnames('article-content', {
          t3: cover.type === 3,
          'none-mt': cover.type === 0,
        })}
      >
        <h3>{title}</h3>
        <div className="article-imgs">
          {/* <Image src={item} /> */}
          {cover.images &&
            cover.images.map((i, index) => (
              <div className="article-img-wrapper" key={index}>
                <img src={i} alt="" />
              </div>
            ))}
        </div>
      </div>
      <div className={classnames('article-info')}>
        <span>{aut_name}</span>
        <span>{comm_count} 评论</span>
        <span>{dayjs(pubdate).from()}</span>

        <span
          className="close"
          // onClick={(e) => {
          //   e.stopPropagation()
          //   onFeedback(art_id)
          // }}
        >
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  )
})

export default ArticleItem
